{% extends "base.html" %}
{% block title %}Eagle审计监控{% endblock %}
{% block head %}
    <link rel="stylesheet" href="static/plugins/datatables/dataTables.bootstrap.css">
    <script src="static/plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="static/plugins/datatables/dataTables.bootstrap.min.js"></script>
{% endblock %}
{% block contentheader %}Eagle{% endblock %}
{% block contentsmallheader %}监控Eagle中定义的安全审计操作的报警情况{% endblock %}
{% block content %}
    <div class="row">
        <div class="col-md-3">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title fa fa-tv"> 安全审计监控类型</h3>
                    <div class="box-tools">
                        <button type="button" class="btn btn-box-tool " data-widget="collapse"><i
                                class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body" style="display: block;">
                    <ul class="nav nav-pills nav-stacked" id="task_list" style="overflow: auto;max-height: 700px">
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-9" id="table_name">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title fa fa-tv" id="current_tbl"></h3>
                </div>
                <div class="box-body" id="table_container">

                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block script %}
    <script>
        function add_class() {
            $('#treeview4').addClass('active');
            $('#menu4').addClass('menu-open');
            $('#monitoreagle').addClass('active');
        }
        $('#table_name').hide();
        var table_example = '<table id="example1" class="table table-bordered table-striped dataTable" role="grid" aria-describedby="example1_info">'
        var table_container = $('#table_container');
        $.ajax({
            url: "/get_monitor_eagle_type", success: function (data) {
                for (var i = 0; i < data.data.length; i++) {
                    $("#task_list").append("<li  data-target='" + data.data[i][0] + "'><a href='#'><i class='fa fa-tasks'></i> " + data.data[i][0] + "<span class='label label-primary pull-right'>" + data.data[i][1] + "</span></a></li>")
                }
            }
        });
        $('ul#task_list').on('click', 'li', function () {
            var type = $(this).attr("data-target");
            if ($(this).text().replace(type, "").trim() == '0')
                return;
            $('#table_name').hide();
            $.ajax({
                data: {'type': type},
                url: "/get_monitor_eagle_detail",
                success: function (data) {
                    table_container.empty();
                    table_container.append(table_example);
                    $('#example1').DataTable({
                        "order": [[0, "desc"]],
                        data: data.data.dataset,
                        destroy: true,
                        columns: data.data.columns,
                        columnDefs: [
                            {
                                "render": function (d, type, row, meta) {
                                    //渲染 把数据源中的标题和url组成超链接
                                    return '<a href="' + d + '" target="_blank">detail</a>';
                                },
                                //指定是第三列
                                "targets": 4
                            }, {
                                "render": function (d, type, row, meta) {
                                    //渲染 把数据源中的标题和url组成超链接
                                    return "<a target='_blank' data-container='body' data-trigger='hover' data-toggle='popover' data-placement='top' data-content='" + d + "'>" + d.substring(0, 40) + "......</a>";
                                },
                                //指定是第三列
                                "targets": 3
                            }]
                    });
                    $("[data-toggle='popover']").popover({html: 'true'});
                    $("#example1").on('draw.dt', function () {
                        $("[data-toggle='popover']").popover({
                            html: 'true'
                        });
                    });
                });
            $(this).siblings().removeClass("active");
            $(this).addClass("active");
            $("#current_tbl").text($(this).attr("data-target") + "审计详情：");
        });
    </script>
{% endblock %}